﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <link rel="stylesheet" href="styles/style.css">
</head>

<body>
    <div class="container" id="videoPlayer" onload="playVideo">
        <div id="player-loading">
            <div class="animbox">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="text">
                <span>正在加载内容...</span>
                <span class="progress"></span>
            </div>
        </div>
        <canvas id="playCanvas"></canvas>
    </div>
    <script type='text/javascript' src="./libs/common.js"></script>
    <script type='text/javascript' src="./libs/pcm-player.js"></script>
    <script type='text/javascript' src="./libs/webgl.js"></script>
    <script type='text/javascript' src="./libs/player.js"></script>
    <script type='text/javascript'>
        //设置convas的宽高
        const canvasId = "playCanvas";
        var canvas = document.getElementById(canvasId);
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        //Player object.
        self.player = new Player();

        var loadingDiv = document.getElementById("player-loading");
        self.player.setLoadingDiv(loadingDiv);

        //Formated logger.
        var logger = new Logger("Page");

        function playVideo() {
            var protoObj = {
                url: getQueryString('videoUrl'),
                // url: "http://172.16.22.201:9000/live/7605662860169526_001-0104.flv",
                // waitLength : 512 * 1024,
                waitLength: 64 * 1024,
                // waitLength : 40,   // recive 40 packets start opendecode.
                stream: true
            };
            var currentState = self.player.getState();

            if (currentState != playerStatePlaying) {
                var canvas = document.getElementById(canvasId);
                if (!canvas) {
                    logger.logError("No Canvas with id " + canvasId + "!");
                    return false;
                }

                self.player.play(protoObj.url, canvas, function (e) {
                    console.log("play error " + e.error + " status " + e.status + ".");
                    if (e.error == 1) {
                        logger.logInfo("Finished.");
                    }
                }, protoObj.waitLength, protoObj.stream);
            } else {
                self.player.pause();
            }
            return true;
        }

        function stopVideo() {
            self.player.stop();
        }

        function fullscreen() {
            self.player.fullscreen();
        }

        function getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            };
            return null;
        }
        playVideo()
    </script>
</body>

</html>